<script setup>
import {ref, watch, watchEffect} from 'vue'
import { StringUtils } from '@/utils/StringUtils'
import UniMessageEx from '@/components/UniMessageEx.vue'
import { uid } from 'radash'
import { PageUtil } from '../utils/PageUtil'
import { useMessage } from '../store/MessageStore'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'

//#region Refs

//#endregion Refs

//-----------------------------------------------------------------

//#region Const
const props = defineProps({
  multiple: {
    type: Boolean,
    default: false
  },
  dialogOnly: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: [Number, String, Array],
    default: ''
  },
  displayValue: {
    type: [Number, String],
    default: ''
  },
  eventId: {
    type: String,
    default: ''
  },
  valueKey: {
    type: String,
    default: '',
    required: true
  },
  labelKey: {
    type: String,
    default: '',
    required: true
  },
  page: {
    type: String,
    default: '',
    required: true
  },
  placeholderSelector: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  from: {
    type: String,
    default: ''
  },
  params: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emits = defineEmits(['change', 'update:modelValue'])
//#endregion Const

//-----------------------------------------------------------------

//#region Use
const messageStore = useMessage()
//#endregion Use

//-----------------------------------------------------------------

//#region Data
const showLabel = ref('')

//#endregion Data

//-----------------------------------------------------------------

//#region Method
watch(()=>props.displayValue,(v)=>{
  showLabel.value = v
},{immediate:true})

const _getEventId = function () {
  let _eventId = props.eventId

  if (StringUtils.isEmptyOrNull(props.eventId)) {
    _eventId = uid(8)
  }

  return _eventId + '-item-select'
}

const onSelection = function () {
  if (props.disabled) {
    return
  }
  if (StringUtils.isEmptyOrNull(props.page)) {
    messageStore.error('选择器页面未正确配置!')
    return
  }

  PageUtil.addEvent(_getEventId(), () => {}, {
    route: props.page,
    params: {
      ...props.params,
      __eventId: _getEventId(),
      valueKey: props.valueKey,
      labelKey: props.labelKey,
      multiple: props.multiple
    }
  })
}

const updateParams = function(params){
  Object.assign(props.params,params)
}
//#endregion Method

//-----------------------------------------------------------------

//#region Page Events
console.log('[Selector Event started] name=', _getEventId())

uni.$off(_getEventId())

uni.$on(_getEventId(), (data) => {
  if (StringUtils.isEmptyOrNull(props.valueKey)) {
    messageStore.error('选择器valueKey未正确配置!')
    return
  }
  const { multiple = false } = props
  console.log('[Selector Event] name=', _getEventId(), 'data=', data)

  if (!multiple) {
    const [item] = data || []
    showLabel.value = item[props.labelKey]
    emits('update:modelValue', item[props.valueKey])
  }
  emits('change', data)
  PageUtil.back()
})
//#endregion Page Events



defineExpose({
  show: onSelection,
  updateParams:updateParams,
})
</script>

<template>
  <div
    :class="[
      'input-item-warp item-selector',
      props.disabled ? 'disabled' : '',
      props.dialogOnly ? 'hidden' : ''
    ]"
    @click="onSelection"
  >
    <div :class="['input-text', props.disabled ? 'disabled' : '']">
      <span class="value" v-if="showLabel">{{ showLabel }}</span>
      <span class="value placeholder placeholder-class" v-else>{{ placeholderSelector }}</span>

      <uni-icons type="right"></uni-icons>
    </div>

    <uni-message-ex />
  </div>
</template>

<style scoped lang="scss">
.input-item-warp {
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background-color: white;

  &.disabled {
    background-color: #f5f7fa;
  }

  &.hidden {
    display: none;
    position: absolute;
  }

  .input-text {
    color: black;
    padding-left: 10px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    flex-grow: 1;

    .value {
      &.placeholder {
        color: #999999;
        font-size: 14px;
      }
    }

    &.disabled {
      color: #616161;
    }
  }
}
</style>
